<template>
  <view class="container">
    <form @submit="formSubmit" @reset="formReset">
      <tui-list-cell :hover="false">
        <view class="tui-line-cell">
          <view class="tui-title">联系邮箱</view>
          <input
            placeholder-class="phcolor"
            class="tui-input"
            name="email"
            placeholder="请输入您的邮箱地址"
            type="text"
            v-model="email"
          />
          <view @tap="paste('email')" class="paste-btn" hover-class="tui-opcity">
            <image mode="widthFix" style="width:100%" src="/static/images/my/paste.png" />
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell">
          <view class="tui-title">书籍链接</view>
          <view @tap="paste('url')" class="paste-btn" hover-class="tui-opcity">
            <image mode="widthFix" style="width:100%" src="/static/images/my/paste.png" />
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell">
          <textarea
            placeholder-class="phcolor"
            class="tui-input border"
            name="url"
            placeholder="请输入书籍链接"
            v-model="url"
          />
        </view>
      </tui-list-cell>
      <view class="tui-btn-box">
        <button class="btn-primary" hover-class="btn-hover" formType="submit" type="primary">提交</button>
        <button class="btn-primary btn-gray" hover-class="btn-gray-hover" formType="reset">重置</button>
      </view>
    </form>
    <tui-page-loading class-name="loader2" :show="loading" />
  </view>
</template>

<script>
const form = require("@/components/utils/formValidation.js");
import tuiListCell from "@/components/list-cell/list-cell";
import tuiPageLoading from "@/components/page-loading/page-loading.vue";

export default {
  components: {
    tuiListCell,
    tuiPageLoading
  },
  data() {
    return {
      url: "",
      email: "",
      loading: false
    };
  },
  methods: {
    paste(key) {
      uni.getClipboardData({
        success: res => {
          if (res.data) {
            this[key] = res.data;
          } else {
            this.tui.toast("剪切板内容为空");
          }
        }
      });
    },
    formSubmit: function(e) {
      //表单规则
      let rules = [
        {
          name: "email",
          rule: ["required", "isEmail"],
          msg: ["请输入邮箱地址", "邮箱地址格式不正确"]
        },
        {
          name: "url",
          rule: ["required", "isUrl"],
          msg: ["请输入书籍链接", "书籍链接格式不正确"]
        }
      ];
      //进行表单检查
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      if (!checkRes) {
        // 验证通过 提交数据
        this.loading = true;
        this.db
          .collection("feedback")
          .add({
            data: { ...formData, created_at: new Date() }
          })
          .then(res => {
            this.loading = false;
            if (res.errMsg == "collection.add:ok") {
              this.tui.toast("感谢您的反馈");
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                });
              }, 1000);
            } else {
              this.tui.toast(res.errMsg);
            }
          });
      } else {
        this.tui.toast(checkRes);
      }
    },
    formReset: function(e) {
      console.log("清空数据");
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx 0 50rpx 0;
}

.tui-line-cell {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.tui-title {
  line-height: 32rpx;
  flex-shrink: 0;
}

.tui-input {
  font-size: 32rpx;
  color: #333;
  padding-left: 20rpx;
  flex: 1;
}

.paste-btn {
  width: 50rpx;
}

.border {
  border: 1rpx #ddd solid;
  border-radius: 10rpx;
  padding: 20rpx;
}

.radio-group {
  margin-left: auto;
  transform: scale(0.8);
  transform-origin: 100% center;
  flex-shrink: 0;
}

.tui-radio {
  display: inline-block;
  padding-left: 28rpx;
  font-size: 36rpx;
  vertical-align: middle;
}

.tui-btn-box {
  padding: 40rpx 50rpx;
  box-sizing: border-box;
}

.btn-gray {
  margin-top: 30rpx;
}

.tui-tips {
  padding: 30rpx;
  color: #999;
  font-size: 24rpx;
}
</style>
